<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h标签</title>
    <!--
        1. 需要注意的是: 这里不可以写绝对路径/css/bootstrap.css, 虽然可以点进去, 但是无法作用.
            - 请使用相对路径.
    -->
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="container">
    <h1>测试1<small>副标题1</small></h1>
    <h2>测试2</h2>
    <h3>测试3</h3>
    <h4>测试4<small>副标题2</small></h4>

    <p>hello1</p>
    <p class="lead">hello2</p>
    <p>hello world<mark>这里有背景颜色</mark></p>
    <del>删除线效果</del>

    <!--
        1. text-left表示使内容显示在容器的左边;
        2. text-center表示使内容显示在容器的中间;
        3. text-right表示使内容显示在容器的右边;
    -->
    <p class="text-left">你好吗?</p>
    <p class="text-center">你好吗?</p>
    <p class="text-right">你好吗?</p>

    <!--
        1. text-lowercase表示是将文字内容替换为全部小写;
        2. text-uppercase表示是将文字内容替换为全部大写;
        3. text-capitalize表示是将文字内容替换为首字母大写;
    -->
    <p class="text-lowercase">well1</p>
    <p class="text-uppercase">well2</p>
    <p class="text-capitalize">well3</p>

    <address>
        <strong>英雄联盟</strong><br/>
        北京市,海淀区<br/>
        上地三街,嘉华大厦: 1008
        <abbr title="phone">P: 8888 8888</abbr>
    </address>
</div>
</body>
</html>